﻿@{
    ViewBag.Title = "Bitcoin Tracker";
}
<h2>Bitcoin Tracker</h2>
<p>
    Welcome to Bitcoin Tracker! This web application connects using a web socket to
    <a href="https://www.bitstamp.net/" target="_blank">Bitstamp</a> in order to track the latest Bitcoin transactions.
    The transactions are listed in the left side of the webpage after the <b>Connect</b> button is pressed.
    Please allow up to 1 minute for a transaction to be listed, since they appear in real time and not all the time 
    people buy Bitcoins.
</p>
<p>
    After pressing the <b>Connect</b> button you are automatically connected using a web socket to a server that will store
    and sum up your selected transactions. Please check the checkbox for a transaction to be added and uncheck for it to
    be removed. If you want to clear the information stored about the current transactions press the Clear button.
</p>
<p>
    <b>
        Please see the <a href="/Home/About">About</a> section for detailed information about the implementation.
    </b>
</p>
<div id="sides">
    <div id="left">
        <div class="container">
            <input type="button" id="connectToHub" value="Connect" onclick="connectToHub();" />
            <input type="button" id="clearCurrentContent" value="Clear" onclick="clearCurrentContent();" />
            <br />
            <div class="panel panel-success">
                <div id="bitcoinHeader" class="panel-heading  panel-success">
                    Bitcoin Trades
                </div>
                <div class="panel-body panel-success">
                    <div class="list-group" id="listGroupBitcoins">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="right">
        <div id="isConnectedToHub"></div>
        <p>
            See the avarage price for the selected bitconins purchases
        </p>
        <p>
            <b> Total amount: </b> <label id="totalAmount">0</label>
        </p>
        <p>
            <b> Total sum: </b> <label id="totalPrice">0</label>
        </p>
        <p>
            <b> Response message: </b> <label id="serverResponseMessage"></label>
        </p>
    </div>
</div>

@section scripts {
    <script src="http://js.pusher.com/2.2.0-rc2/pusher.min.js"></script>
    <!--Script references. -->
    <!--The jQuery library is required and is referenced by default in _Layout.cshtml. -->
    <!--Reference the SignalR library. -->
    <script src="~/Scripts/jquery.signalR-2.0.2.min.js"></script>
    <!--Reference the autogenerated SignalR hub script. -->
    <script src="~/signalr/hubs"></script>
    <!--SignalR script to update the bitcoin page and send messages.-->
    <script>
        var mapData = {};

        function handleClick(cb, id) {
            var bitcoin = $.connection.bitcoinHub;
            if (cb.checked) {
                bitcoin.server.addToAvarage(id, mapData[id].amount, mapData[id].price);
            }
            else {
                bitcoin.server.removeFromAvarage(id);
            }
        }

        function clearCurrentContent(cb, id) {
            $('#totalAmount').text(0);
            $('#totalPrice').text(0);
            $('#serverResponseMessage').text("");
            $('#listGroupBitcoins').text("");

            var bitcoin = $.connection.bitcoinHub;
            bitcoin.server.clearContentCurrentClient();
        }
    </script>

    <script>
        $(function () {
            // Reference the auto-generated proxy for the hub.
            var bitcoin = $.connection.bitcoinHub;
            // Create a function that the hub can call back to display messages.
            bitcoin.client.updateTotalAmount = function (message, totalAmount, totalPrice) {
                $('#totalAmount').text(totalAmount);
                $('#totalPrice').text(totalPrice);
                $('#serverResponseMessage').text(message);
            };

            bitcoin.client.updateMessage = function (message) {
                $('#serverResponseMessage').text(message);
            };
        });

        var pusher;
        var channel;

        function connectToHub() {

            pusher = new Pusher('de504dc5763aeef9ff52');
            channel = pusher.subscribe('live_trades');

            $('#bitcoinHeader').text("Loading bitcoin trades...");

            channel.bind('trade', function (data) {
                mapData[data.id] = data;

                $('#listGroupBitcoins').append(
                    '<a class="list-group-item">' +
                    '<label><input type="checkbox" onclick="handleClick(this,' + data['id'] + ');">Add to total</label>' +
                        htmlEncode('   ID: ' + data['id'] + '  Amount: ' + data['amount'] + '  Price: ' + data['price'] + ' USD') +
                    '</a>'
                    );
            });

            // On select calculate total between all selected items;
            $.connection.hub.url = '/signalr';
            $.connection.hub.start().done(function () {
                $('#isConnectedToHub').text("Connected to hub.");
            })
    .fail(function () { alert('Could not Connect!'); });
        }

        // This optional function html-encodes messages for display in the page.
        function htmlEncode(value) {
            var encodedValue = $('<div />').text(value).html();
            return encodedValue;
        }
    </script>
}
